<!-- LoadingWrapper.svelte -->
<script>
	let className = '';

	export let loading = false; // 加载状态属性
	export let style = '';
	export { className as class };
</script>

{#if loading}
	<div class={['button-placeholder', className].join(' ')} {style}>
		<!-- 可以在这里自定义一个加载动画或占位符 -->
		<p>加载中...</p>
		<div class="loader"></div>
	</div>
{:else}
	<slot /> <!-- 通过插槽展示传入的内容 -->
{/if}

<style>
	.button-placeholder {
		width: fit-content;
		height: 36px;
		line-height: 36px;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	/* HTML: <div class="loader"></div> */
	.loader {
		width: 70px;
		height: 26px;
		background: #3fd97f;
		--c: no-repeat linear-gradient(#000 0 0);
		--s: 18px 18px;
		-webkit-mask:
			var(--c) left 4px top 50%,
			var(--c) center,
			var(--c) right 4px top 50%,
			linear-gradient(#000 0 0);
		-webkit-mask-composite: xor;
		mask-composite: exclude;
		animation: l2 1.5s infinite;
	}
	@keyframes l2 {
		0% {
			-webkit-mask-size:
				0 0,
				0 0,
				0 0,
				auto;
		}
		16.67% {
			-webkit-mask-size:
				var(--s),
				0 0,
				0 0,
				auto;
		}
		33.33% {
			-webkit-mask-size:
				var(--s),
				var(--s),
				0 0,
				auto;
		}
		50% {
			-webkit-mask-size: var(--s), var(--s), var(--s), auto;
		}
		66.67% {
			-webkit-mask-size:
				0 0,
				var(--s),
				var(--s),
				auto;
		}
		83.33% {
			-webkit-mask-size:
				0 0,
				0 0,
				var(--s),
				auto;
		}
		100% {
			-webkit-mask-size:
				0 0,
				0 0,
				0 0,
				auto;
		}
	}
</style>
